<script>
import Card from "./components/card";
import List from "./components/list";
import Msgbox from "./components/msgBox";

export default {
  components: { Card, List, Msgbox },
  created() {
    // this.$store.commit("INIT_DATA", {});
  }
};
</script>

<template>
  <div id="app">
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <msgbox></msgbox>
    </div>
  </div>
</template>

<style lang="less" scoped>
#app {
  height: 100%;
  width: ~"calc(100% + 20px)";

  .sidebar,
  .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    width: 256px;
    color: #333333;
    background-color: #ffffff;
    border-right: 1px solid #eee;
  }
  .main {
    position: relative;
    overflow: hidden;
    background-color: #f5f8fdff;
  }
  .text {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }
  .message {
    height: ~"calc(100% - 160px)";
  }
}
</style>
